<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h2 class="mb-5 flex items-center">数组对象添加新属性</h2>
                <Codemirror :code="array1Code" name="map数组对象添加新属性" class="mb-10" />
                <Codemirror :code="array2Code" name="forEach数组对象添加新属性" class="mb-10" />
                <Codemirror :code="array3Code" name="filter数组对象添加新属性" class="mb-10" />
                <Codemirror :code="array4Code" name="find其中一项数组对象添加新属性" class="mb-10" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        const array1Code = ref(`let person =[{
  id: 1,
  name: 'vhen'
},{

  id: 2,
  name: 'json'
}]

person.map((item,index) =>{
   return Object.assign(item,{index:index})
})

console.log(JSON.stringify(person))`)

        const array2Code = ref(`let person =[{
  id: 1,
  name: 'vhen'
},{

  id: 2,
  name: 'json'
}]

person.forEach((item,index) =>{
   return Object.assign(item,{index:index})
})

console.log(JSON.stringify(person))`)

        const array3Code = ref(`let person =[{
  id: 1,
  name: 'vhen'
},{

  id: 2,
  name: 'json'
}]

person.filter((item,index) =>{
   return Object.assign(item,{index:index})
})

console.log(JSON.stringify(person))`)

        const array4Code = ref(`let person =[{
  id: 1,
  name: 'vhen'
},{
  id: 2,
  name: 'json'
}]

person.find((item,index) =>{
  if(item.id == 2){
    Object.assign(item,{index:index})
  }
})

console.log(JSON.stringify(person))`)

        return {
            array1Code,
            array2Code,
            array3Code,
            array4Code,
        }
    }
})
</script>

<style scoped>

</style>